<template>
  <div>
    <countTo  :startVal="startVal"  :endVal="endVal" :duration="duration" ></countTo>
    <div id="charts" ref="charts" style="height:500px;width:500px;"></div>
  </div>
</template>

<script>

import countTo from 'vue-count-to'

import * as echarts from 'echarts'







  export default {
    head:{ 
        title:'数据展示'
    },
    layout:'main',
    components:{countTo },
    data(){ 

      return { 
          startVal:0,
        
          endVal:10000,
          duration:500,
          
        myChart: null 
      }
    },
    mounted(){ 
      this.$nuxt.$loading.start()
      this.myChart = echarts.init(this.$refs.charts)

      this.myChart.setOption({ 
            
          tooltip: {
             trigger: 'axis',
             itemStyle:{ 
               color:'red'
             }
          },
          legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
           grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
          },
          toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
          xAxis: {
             type: 'category',
             boundaryGap: false,
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
           
          },
          yAxis: {
            type: 'value'
          },
          series: [
            
            {
              name: '销量',
              type: 'line',
              smooth: true,
               areaStyle: {},
              data: [{ 

                value:15,
                itemStyle:{ 
                  color:'skyblue'
                },
                lineStyle:{ 
                  width:'10px'
                }
               }, { 

                 value:80,
                 itemStyle:{ 
                   color:'pink',
                   width:10
                 }
               }, 36, 10, 10, 20],
                        
              itemStyle:{ 
                color:'skyblue'
              }
             
            }, {
              name: '销量',
              type: 'line',
                smooth: true,
                 areaStyle: {},
              data: [{ 

                value:25,
                itemStyle:{ 
                  color:'skyblue'
                },
                lineStyle:{ 
                  width:'10px'
                }
               }, { 

                 value:70,
                 itemStyle:{ 
                   color:'pink',
                   width:10
                 }
               }, 100, 30, 40, 35],
                        
              itemStyle:{ 
                color:'pink'
              }
             
            },
            
  ]


      })
    }
   
  }
</script>

<style lang="scss" scoped>

</style>